<template>
  <div class="app-container">
    <div class="filter-container filter-container1">
      <el-select
        v-model="carrierId"
        placeholder="请选择所属运营商"
        @change="selectChange(currentPage)"
      >
        <el-option
          v-for="it in classifyList"
          :key="it.id"
          :label="it.carrierName"
          :value="it.id"
        ></el-option>
      </el-select>
      <div class="elUpload">
        <el-upload
          class="filter-item filter-item1"
          :action="'https://wechat.zhengjkj.com/xyxy/wxapp/web/schoolCard/uploadMobile'"
          :on-progress="
            () => {
              this.loadList = true;
            }
          "
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :show-file-list="false"
          :data="{ carrierId }"
          multiple
          type="file"
          :before-upload="
            (file) => {
              if (!carrierId) {
                this.$message.error('请选择运营商');
                return false;
              } else return true;
            }
          "
        >
          <el-button size="small" type="primary">导入号码</el-button>
        </el-upload>
      </div>

      <el-button size="mini" type="danger" @click="delAll()">删除</el-button>
    </div>
    <el-table
      tooltip-effect="dark"
      ref="multipleTable"
      :data="tableData"
      v-loading="loadList"
      @selection-change="handleSelectionChange"
      element-loading-text="拼命加载中..."
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="operator.carrierName"
        label="所属运营商"
      ></el-table-column>

      <el-table-column prop="num" label="可用号码"></el-table-column>

      <!-- <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row.id)">修改</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div v-show="!loadList" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, delAll, getYList } from "./api";
export default {
  data() {
    return {
      multipleSelection: [],
      classifyList: [],
      carrierId: window.sessionStorage.getItem("carrierId")
        ? window.sessionStorage.getItem("carrierId")*1
        : "",
      currentPage: 1,
      total: 0,
      pager: 1,
      pageSize: 10,
      loadList: true,
      tableData: [],
      // getListFunc: Service.getList,
      // delItemFunc: Service.delItem,
      add_url: "/aquare/campus-card/add-campus-card/add",
      edit_url: (id) => {
        return `/aquare/campus-card/add-campus-card/${id}/edit`;
      },
    };
  },
  created() {
    this.refresh_data(this.currentPage);
    this.selectChange(this.currentPage);
  },
  methods: {
    async refresh_data(currentPage) {
      if (!currentPage) currentPage = 1;
      const res1 = await getYList();
      if (res1.code === 1) {
        this.classifyList = res1.data;
      }
      this.loadList = false;
    },
    // 查询
    async selectChange(currentPage) {
      console.log(this.carrierId, "======>");
      if (!this.carrierId) return;
      window.sessionStorage.setItem("carrierId", this.carrierId);
      this.loadList = true;
      const res = await getList(this.pageSize, currentPage, this.carrierId * 1);
      if (res.code === 1) {
        res.data.records.forEach((i) => {
          i.operator = this.classifyList.find((t) => t.id === this.carrierId);
        });
        this.tableData = res.data.records;
        console.log(this.tableData, "---->>>");
        this.total = res.data.total;
        this.currentPage = res.data.current;
      }
      this.loadList = false;
    },
    // 批量删除
    handleSelectionChange(val) {
      this.multipleSelection = val;

      let answerListId = "";
      this.multipleSelection.forEach((i) => {
        answerListId += i.id + ",";
      });
      answerListId.substring(0, answerListId.length - 1);
      this.multipleSelection = answerListId;

      this.multipleSelection = answerListId.substring(
        0,
        answerListId.length - 1
      );
      console.log(this.multipleSelection, "===");
    },
    handleSizeChange(val) {
      console.log(val, "111");
      this.pageSize = val;
      this.selectChange(1);
    },
    handleCurrentChange(val) {
      console.log(val, "00000");
      this.selectChange(val);
    },
    edit(id) {
      this.$router.push(this.edit_url(id));
    },
    async delAll() {
      this.$confirm("请确认删除", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.loadList = true;
        const res = await delAll(this.multipleSelection);
        if (res.code === 1) {
          this.selectChange(this.currentPage);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    uploadSuccess(response, file, fileList) {
      console.log("uploadSuccess", response);
      if (response.code == 1) {
        this.loading = false;
        this.$message({
          message: "上传成功",
          type: "success",
          center: true,
        });
        this.selectChange(this.currentPage);
      } else {
        this.loading = false;
        this.$message({
          message: response.description,
          center: true,
        });
      }
    },
    uploadError(err, file, fileList) {
      console.log("uploadError");
      this.loading = false;
      this.$message({
        message: "上传失败",
        center: true,
      });
    },
  },
};
</script>

<style scoped>
.filter-container1 {
  display: flex;
}
.elUpload {
  margin: 0 50px;
}
</style>
